<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>角色管理</title>
    <link href="/static/css/bootstrap.min.css" rel="stylesheet">
    <link href="/static/plugins/bootstrap-table/bootstrap-table.css" rel="stylesheet">
    <link href="/static/plugins/font-awesome/css/font-awesome.css" rel="stylesheet">
    <link href="/static/css/style.css" rel="stylesheet">
    <link rel="stylesheet" href="/static/css/public.css">
    <!-- jquery 提示插件css -->
    <link href="/static/plugins/toastr.min.css" rel="stylesheet">
    <!--zTree-->
    <link rel="stylesheet" href="/static/plugins/zTree/zTreeStyle.css">
    <!--样式表-->
    <style>
        .more-box{
            position: absolute;
            right: 20px;
            top: 61px;
            width: 140px;
            background-color: #fff;
            z-index: 100;
            border: medium none;
            border-radius: 3px;
            box-shadow: 0 0 3px rgba(86, 96, 117, 0.7);
            display: none;
        }
        .more-box-li{
            cursor: pointer;
        }
        .more-box-li:hover{
            color: #262626;
            background-color: #f5f5f5;
        }
        .more-box-li>span{
            display: block;
            padding: 6px 20px;
            clear: both;
            font-weight: 400;
            line-height: 1.42857143;
            color: inherit;
            white-space: nowrap;
            border-radius: 3px;
            margin: 4px;
            text-align: left;
        }
        .form-role{
            width: 87%;
        }
        .modal-box{
            width: 100%;
            height: 400px;
        }
        .modal-box-left{
            width: 100%;
            height: 400px;
            border: 1px solid #e5e6e7;
            overflow: hidden;
            border-top: none;
        }
        .role-box{
            width: 100%;
            height: 400px;
            overflow: auto;
        }
        .search-box{
            width: 100%;
            height: 28px;
            background: #fff;
            border-bottom: 1px solid #e5e6e7;
            line-height: 30px;
            overflow: hidden;
            position: relative;
        }
        .search-box input{
            border: none;
            height: 26px;
            float: left;
        }
        .search-box i{
            float: left;
            line-height: 28px;
            margin-right: 10px;
            cursor: pointer;
        }
        .selected-box{
            position: absolute;
            top: 0;
            right: 0;
            width: 102px;
            height: 28px;
            background-color: #eee;
            color: #666;
            text-align: center;
            font-size: 12px;
            float: left;
            cursor: pointer;
        }
        .selected-box:hover{
            background-color: #d9d9d9;
            color: #666;
        }
        .user-list{
            width: 100%;
            height: 400px;
            overflow: auto;
        }
        .card-box,.member{
            position: relative;
            float: left;
            width: 185px;
            height: 63px;
            border: 1px solid #ccc;
            background-color: #fff;
            border-radius: 3px;
            margin: 10px 0 0 10px;
            padding-left: 65px;
            padding-top: 4px;
            overflow: hidden;
            -moz-user-select: none;
            -webkit-user-select: none;
            -ms-user-select: none;
            -khtml-user-select: none;
            user-select: none;
            cursor: pointer;
        }
        .triangle{
            position: absolute;
            top: 0;
            right:0;
            display: none;
            width:0;
            height:0;
            border-right:20px solid #ff5d5b;
            border-bottom:20px solid transparent;
            border-left:20px solid transparent;
            color: #fff;
        }
        .triangle i{
            position: absolute;
            top: 0;
            right: -20px;
            font-size: 8px;
            font-weight: 100;
        }
        .card-box.now,.member.now{
            border: 2px solid #ff5d5b;
        }
        .card-box.now .triangle,.member.now .triangle{
            display: block;
        }
        .card-box-img {
            position: absolute;
            left: 0;
            top: 0;
            width: 59px;
            height: 100%;
            line-height: 58px;
            padding-left: 0;
            background-color: #ebebeb;
            border-right: 1px solid #ccc;
        }
        .card-box-content p {
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            margin: 0;
            color: #000;
        }
        .modal-box-right{
            position: absolute;
            right: 0;
            top: 0;
            height: 400px;
            width: 0;
            border-left: 1px solid #ddd;
            background-color: #fff;
            z-index: 10;
            overflow: auto;
        }
        .right-title{
            height: 28px;
            border-bottom: 1px solid #e5e6e7;
            line-height: 28px;
            font-size: 14px;
            padding-left: 10px;
            color: #666;
            overflow: hidden;
        }
        .card-close{
            margin-left: 80px;
            font-size: 16px;
        }
        .card-close:hover{
            cursor: pointer;
            color: #000;
        }
        .selected-item{
            position: relative;
            width: 160px;
            height: 48px;
            border: 1px solid #ccc;
            border-radius: 4px;
            margin: auto;
            margin-top: 10px;
            padding: 5px 0 0 10px;
            color: #000;
        }
        .selected-item p{
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            margin: 0;
        }
        #item-close{
            position: absolute;
            top: 0;
            right: 4px;
            margin: 0;
        }
        .modal-view{
            width: 800px!important;
        }
        .modal-data{
            width: 1100px!important;
        }
        .dataFrom-box{
            float: left;
            width: 87%;
        }
        .dataFrom{
            width: 100%;
        }
        .dataItem-box{
            overflow: hidden;
            margin-top: 10px;
        }
        .dataFrom .dataItem-box:nth-child(1){
            margin-top: 0;
        }
        .dataItem{
            width: 75%;
            height: 28px;
            border: 1px solid #e5e6e7;
            margin-right: 18px;
            float: left;
        }
        .dataItem-num{
            height: 100%;
            line-height: 26px;
            width: 30px;
            text-align: center;
            background-color: #EEE;
        }
        .dataItem-btnBox{
            float: left;

        }
        .form-add{
            width: 80%;
        }
        .add-title{
            width: 80px;
        }
        .form-group{
            overflow: hidden;
        }
        .add-btn{
            padding: 2px 6px;
            margin-right: 4px;
        }
        .add-btn i{
            margin-right: 4px;
        }
        .grant-title{
            border-bottom: 1px solid #eee;
            width: 100%;
            height: 47px;
            overflow: initial;
            margin: 0;
            padding: 0;
        }
        .grant-title li{
            list-style: none;
            float: left;
            margin: 0;
            padding: 0 20px 0 30px;
            line-height: 46px;
            position: relative;
            background: #f5f5f5;
            color: #d0d0d0;
            font-size: 16px;
            cursor: default;
            -webkit-transition: all .218s ease;
            -moz-transition: all .218s ease;
            -o-transition: all .218s ease;
            transition: all .218s ease;
        }
        .grant-title li span.chevron{
            border: 24px solid transparent;
            border-left: 14px solid #d4d4d4;
            border-right: 0;
            display: block;
            position: absolute;
            right: -14px;
            top: 0;
            z-index: 1;
        }
        .grant-title li span.chevron:before{
            border: 24px solid transparent;
            border-left: 14px solid #f5f5f5;
            border-right: 0;
            content: "";
            display: block;
            position: absolute;
            right: 1px;
            top: -24px;
            -webkit-transition: all .218s ease;
            -moz-transition: all .218s ease;
            -o-transition: all .218s ease;
            transition: all .218s ease;
        }
        .grant-title li.complete{
            background: #fff;
            color: #262626;
        }
        .grant-title li.now{
            background: #fff;
            color: #262626;
        }
        .grant-title li.complete .chevron:before{
            border-left: 14px solid #fff;
        }
        .grant-title li.now .chevron:before{
            border-left: 14px solid #fff;
        }
        .grant-title li.complete:before{
            display: block;
            content: "";
            position: absolute;
            bottom: -1px;
            left: 0;
            right: -1px;
            height: 2px;
            max-height: 2px;
            overflow: hidden;
            background-color: #1bb99a;
            z-index: 10;
        }
        .grant-title li.complete .grant-num{
            border-color: #1bb99a;
            color: #1bb99a;
        }

        .grant-title li.now:before{
            display: block;
            content: "";
            position: absolute;
            bottom: -1px;
            left: 0;
            right: -1px;
            height: 2px;
            max-height: 2px;
            overflow: hidden;
            background-color: #3498DB;
            z-index: 10;
        }
        .grant-title li.now .grant-num{
            border-color: #3498DB;
            color: #3498DB;
        }
        .grant-num{
            border: 2px solid #e5e5e5;
            color: #ccc;
            font-size: 13px;
            border-radius: 100%;
            position: relative;
            z-index: 2;
            display: inline-block;
            width: 24px;
            height: 24px;
            line-height: 20px;
            text-align: center;
            margin-right: 10px;
        }
        .btn.disabled, .btn[disabled], fieldset[disabled] .btn {
            pointer-events: none;
            cursor: not-allowed;
            filter: alpha(opacity=65);
            -webkit-box-shadow: none;
            box-shadow: none;
            opacity: .65;
        }
        .tab-item{
            display: none;
        }
        .my-search-btn {
            left: 205px;
            top: 14px;
        }
        #roleTree{

        }
    </style>
</head>
<body style="background-color: #f3f3f4;">
<div style="padding: 0 15px;" id="content">
    <div class="row wrapper border-bottom white-bg page-heading">
        <div class="col-md-10">
            <h2>角色管理</h2>
            <ol class="breadcrumb">
                <li>
                    <a>系统管理</a>
                </li>
                <li>
                    <a>系统配置</a>
                </li>
                <li class="now">
                    <strong>角色管理</strong>
                </li>
            </ol>
        </div>
        <div class="col-md-2">

        </div>
    </div>
    <!--table 表格-->
    <div class="row">
        <div class="col-md-12">
            <!--<table id="table"></table>-->
            <div class="ibox border-all">
                <div class="ibox-title">
                    <h5>角色管理</h5>
                </div>
                <div class="ibox-content" style="position: relative;">
                    <button class="btn btn-default pull-right my-btn my-btn-more more-btn" id="more">更多</button>
                    <!--点击更多弹出框-->
                    <div class="more-box" id="more-box">
                        <div class="more-box-li" onclick="addMembers()">
                            <span>添加成员</span>
                        </div>
                        <div class="more-box-li" onclick="viewMembers()">
                            <span>查看成员</span>
                        </div>
                        <div class="more-box-li" id="author">
                            <span>功能授权</span>
                        </div>
                        <div class="more-box-li" onclick="dataDuthorization()">
                            <span>数据授权</span>
                        </div>
                    </div>
                    <button class="btn btn-default pull-right my-btn my-btn-add" onclick="addBtnClick()">添加</button>
                    <button class="btn btn-default my-btn my-search-btn my-btn-search">查询</button>
                    <table id="table"
                           data-toggle="table"
                           data-toolbar=".toolbar"
                           data-pagination="true"
                           data-maintain-selected="true"
                           data-search="true"
                           data-show-refresh="true"
                           data-search-align="left"
                           data-toolbar-align="right">
                        <thead>
                        <tr>
                            <th data-field=""></th>
                            <th data-field="code">角色编号</th>
                            <th data-field="name">角色名称</th>
                            <th data-field="time">创建时间</th>
                            <th data-field="founder" data-align="center">创建人</th>
                            <th data-field="status" type="checkbox" data-align="center" v-model="modalData.status" data-formatter="checkBoxFormatter">有效</th>
                            <th data-field="description">角色描述</th>
                            <th data-align="center" data-formatter="operateFormatter" data-events="actionEvents">操作</th>
                        </tr>
                        </thead>
                    </table>
                </div>
            </div>

        </div>
    </div>
    <!--添加 编辑 模态框-->
    <div id="addModal" class="modal fade" style="z-index: 4999!important;">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">{{modalType}}</h4>
                </div>
                <div class="modal-manage">
                    <div class="form-group col-xs-12">
                        <div class="manage-title">
                            <span>角色编号<span class="glyphicon glyphicon-asterisk mandatory"></span></span>
                        </div>
                        <input type="text" class="form-control form-manage form-role" placeholder="角色编号" v-model="modalData.code">
                    </div>
                    <div class="form-group col-xs-12">
                        <div class="manage-title">
                            <span>角色名称<span class="glyphicon glyphicon-asterisk mandatory"></span></span>
                        </div>
                        <input type="text" class="form-control form-manage form-role" placeholder="角色名称" v-model="modalData.name">
                    </div>
                    <div class="form-group col-xs-12">
                        <div class="manage-title">

                        </div>
                        <label style="margin-right: 5px;cursor: pointer;">
                            <input type="checkbox" v-model="modalData.status">
                            有效
                        </label>
                    </div>
                    <div class="form-group col-xs-12">
                        <div class="manage-title">
                            <span style="margin-right: 12px">角色描述</span>
                        </div>
                        <textarea class="form-control form-manage form-manage2" style="resize: none" v-model="modalData.description"></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary submit" onclick="add()">确认</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div>
    <!--删除 模态-->
    <div id="deleteModal" class="modal fade" style="z-index: 5030!important;">
        <div class="modal-dialog" style="width: 400px;">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                </div>
                <div class="modal-manage">
                    <h3 class="text-center">是否确认删除该项</h3>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary submit" onclick="deleteTable()">确认</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div>
    <!--添加成员-->
    <div id="addMembers" class="modal fade">
        <div class="modal-dialog modal-view">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">添加成员</h4>
                </div>
                <div class="modal-box">
                    <div class="col-xs-3" style="padding: 0">
                        <div class="modal-box-left">
                            <input id="role" class="form-control form-manage" type="text" style="width: 100%;height:28px;border-top: none;border-right: none;"  v-model="modalDataName" placeholder="==请选择==">
                            <ul id="roleTree" class="ztree modalZTree border-all" style="width: 100%;left: 0;"></ul>
                            <ul id="roleItemTree" class="role-box ztree" style="width: 100%;left: 0;"></ul>
                        </div>
                    </div>
                    <div class="col-xs-9" style="padding: 0;position: relative">
                        <div class="search-box">
                            <input type="search" class="form-control" placeholder="请输入要查询的关键字" style="width: 80%;">
                            <i class="glyphicon glyphicon-search"></i>
                            <div class="selected-box">已选人员</div>
                        </div>
                        <div class="user-list">
                            <div class="card-box" v-for="(item,index) in userList" @click="userItem(item,index)"
                                 :class="{now:item.isActive}">
                                <div class="triangle"><i class="glyphicon glyphicon-ok"></i></div>
                                <div class="card-box-img">
                                    <img :src="'/static/image/gender'+item.sex+'.png'">
                                </div>
                                <div class="card-box-content">
                                    <p>账户：<span>{{item.safe_code}}</span></p>
                                    <p>姓名：<span>{{item.username}}</span></p>
                                    <p>部门：<span>{{item.department_name}}</span></p>
                                </div>
                            </div>
                        </div>
                        <div class="modal-box-right" id="box-right">
                            <div class="right-title">
                                已选人员
                                <span id="box-close" class="card-close">&times;</span>
                            </div>
                            <div class="selected-wrap" v-for="(item,index) in selectedList">
                                <div class="selected-item">
                                    <p><span>{{item.company_name}}</span></p>
                                    <p><span>{{item.department_name}}</span>【{{item.username}}】</p>
                                    <span id="item-close" class="card-close" @click="deleteSelectd(item,index)">&times;</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary submit">确认</button>
                </div>
            </div><!-- /.modal-content -->
        </div>
    </div>
    <!--查看成员-->
    <div id="viewMembers" class="modal fade">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">查看成员</h4>
                </div>
                <div class="" style="height:500px;overflow: auto;">
                    <div class="member now" v-for="item in memberList">
                        <div class="triangle"><i class="glyphicon glyphicon-ok"></i></div>
                        <div class="card-box-img">
                            <img :src="'/static/image/gender'+item.sex+'.png'">
                        </div>
                        <div class="card-box-content">
                            <p>账户：<span>{{item.safe_code}}</span></p>
                            <p>姓名：<span>{{item.username}}</span></p>
                            <p>部门：<span>{{item.department_name}}</span></p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--功能授权-->
    <div id="authorization" class="modal fade">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">功能授权</h4>
                </div>
                <div class="modal-box">
                    <ul class="grant-title">
                        <li data-target="#step1" class="now">   <!--now-->
                            <span class="grant-num">1</span>系统工能
                            <span class="chevron"></span>
                        </li>
                        <li data-target="#step2" class="">    <!--complete-->
                            <span class="grant-num">2</span>系统按钮
                            <span class="chevron"></span>
                        </li>
                        <li data-target="#step3" class="">
                            <span class="grant-num">3</span>系统视图
                            <span class="chevron"></span>
                        </li>
                    </ul>
                    <div class="tab-content" style="height: 353px;overflow: auto">
                        <div class="tab-item">
                            <ul id="grantTree" class="ztree"></ul>
                        </div>
                        <div class="tab-item">
                            <ul id="buttonTree" class="ztree"></ul>
                        </div>
                        <div class="tab-item">
                            <ul id="viewTree" class="ztree"></ul>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default lastStep" disabled="disabled">上一步</button>
                    <button type="button" class="btn btn-default nextStep">下一步</button>
                    <button type="button" class="btn btn-primary submit" id="submit" disabled="disabled" onclick="grantComplete()">完成</button>
                </div>
            </div><!-- /.modal-content -->
        </div>
    </div>
    <!--数据授权-->
    <div id="dataDuthorization" class="modal fade">
        <div class="modal-dialog modal-data">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">数据授权</h4>
                </div>
                <div class="modal-box" style="height: 570px;">
                    <div class="col-xs-2">
                        <div class="ibox border-all" style="height:546px;border-top: none">
                            <div class="ibox-title">
                                <h5>接口目录</h5>
                            </div>
                            <div class="ibox-content" style="padding: 0;!important;">
                                <ul id="myTree" class="ztree"></ul>
                                <p class="text-center" v-if="leftTreeLoading">正在加载中,请稍后.....</p>
                                <p class="text-center" v-if="!leftTreeLoading && leftTreeList.length==0">暂时没有数据,请添加</p>
                            </div>
                        </div>
                    </div>
                    <div class="col-xs-10">
                        <!--<table id="table"></table>-->
                        <div class="ibox border-all" style="height: 546px;border-top: none">
                            <div class="ibox-title">
                                <h5>数据权限信息</h5>
                            </div>
                            <div class="ibox-content" style="position: relative;">
                                <button style="padding-left: 18px;" class="btn btn-default my-btn pull-right" onclick="interface()">
                                    <i class="glyphicon glyphicon-tags" style="left: -8px;"></i>接口管理
                                </button>
                                <button class="btn btn-default pull-right my-btn my-btn-add" onclick="newNuthorization()">新增</button>
                                <button class="btn btn-default my-btn my-search-btn my-btn-search">查询</button>
                                <table id="dataTable"
                                       data-toggle="table"
                                       data-toolbar=".toolbar"
                                       data-maintain-selected="true"
                                       data-search="true"
                                       data-show-refresh="true"
                                       data-search-align="left"
                                       data-toolbar-align="right">
                                    <thead>
                                    <tr>
                                        <th></th>
                                        <th data-field="name">名称</th>
                                        <th data-field="user">用户/角色</th>
                                        <th data-field="formula">公式</th>
                                        <th data-field="founder">创建人</th>
                                        <th data-align="center" data-field="creationTime">创建时间</th>
                                        <th data-align="center" data-formatter="dataFormatter" data-events="actionEvents">操作</th>
                                    </tr>
                                    </thead>
                                </table>
                            </div>
                        </div>
                    </div>
                </div>
            </div><!-- /.modal-content -->
        </div>
    </div>
    <!--数据编辑-->
    <div id="dataEditing" class="modal fade" style="z-index: 4999!important;">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">编辑数据权限</h4>
                </div>
                <div class="modal-manage" style="height:400px; overflow: auto!important;">
                    <div class="form-group col-xs-12">
                        <div class="manage-title">
                            <span>名称<span class="glyphicon glyphicon-asterisk mandatory"></span></span>
                        </div>
                        <input type="text" class="form-control form-manage form-role" placeholder="">
                    </div>
                    <div class="form-group col-xs-12">
                        <div class="manage-title">
                            <span>过滤条件<span class="glyphicon glyphicon-asterisk mandatory"></span></span>
                        </div>
                        <div class="dataFrom-box">
                            <div class="dataFrom">
                                <div class="dataItem-box">
                                    <div class="dataItem">
                                        <div class="dataItem-num">1</div>
                                        <div class="dataItem-data"></div>
                                    </div>
                                    <div class="dataItem-btnBox">
                                        <button type="button" class="btn btn-default" style="padding: 4px 10px;font-size: 12px;" onclick="dataEdit()">编辑</button>
                                        <button type="button" class="btn btn-default" style="padding: 4px 10px;font-size: 12px;" onclick="dataDel()">删除</button>
                                    </div>
                                </div>
                            </div>
                            <a style="margin-top: 6px;margin-left:4px;display: inline-block" onclick="addMore()">添加更多条件</a>
                        </div>
                    </div>
                    <div class="form-group col-xs-12">
                        <div class="manage-title">
                            <span style="margin-right: 12px">公式</span>
                        </div>
                        <input type="text" class="form-control form-manage form-role" placeholder="请输入公式，默认为1 and 2 and 3 这种且方式">
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary submit" onclick="add()">确认</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div>
    <!--添加更多条件-->
    <div id="addMore" class="modal fade" style="z-index: 5010!important;">
        <div class="modal-dialog" style="width: 500px;">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">添加自定义查询条件</h4>
                </div>
                <div class="modal-manage">
                    <div class="form-group col-xs-12">
                        <div class="manage-title add-title">
                            <span>选择字段<span class="glyphicon glyphicon-asterisk mandatory"></span></span>
                        </div>
                        <select class="form-control form-add">
                            <option value="===请选择===">===请选择===</option>
                            <option>订单金额</option>
                            <option>创建用户</option>
                            <option>部门</option>
                        </select>
                    </div>
                    <div class="form-group col-xs-12">
                        <div class="manage-title add-title">
                            <span>比较符<span class="glyphicon glyphicon-asterisk mandatory"></span></span>
                        </div>
                        <select class="form-control form-add">
                            <option>等于</option>
                            <option>大于</option>
                            <option>大于等于</option>
                            <option>小于</option>
                            <option>小于等于</option>
                            <option>包含</option>
                            <option>包含于</option>
                            <option>不等于</option>
                            <option>不包含</option>
                            <option>不包含于</option>
                        </select>
                    </div>
                    <div class="form-group col-xs-12">
                        <div class="manage-title add-title">
                            <span>字段值类型<span class="glyphicon glyphicon-asterisk mandatory"></span></span>
                        </div>
                        <select class="form-control form-add">
                            <option>文本</option>
                            <option>登陆者ID</option>
                            <option>登陆者账号</option>
                            <option>登陆者公司</option>
                            <option>登陆者公司及下属公司</option>
                            <option>登陆者部门</option>
                            <option>登陆部门及下属部门</option>
                            <option>登陆者岗位</option>
                            <option>登陆者角色</option>
                        </select>
                    </div>
                    <div class="form-group col-xs-12">
                        <div class="manage-title add-title">
                            <span>字段值<span class="glyphicon glyphicon-asterisk mandatory"></span></span>
                        </div>
                        <input type="text" class="form-control form-add" placeholder="">
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary submit" onclick="jurisdictionFun()">确认</button>
                </div>
            </div><!-- /.modal-content -->
        </div>
    </div>
    <!--新增数据授权-->
    <div id="newNuthorization" class="modal fade" style="z-index: 5000!important;">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">编辑数据权限</h4>
                </div>
                <div class="modal-manage" style="height:400px; overflow: auto!important;">
                    <div class="form-group col-xs-12">
                        <div class="manage-title">
                            <span>名称<span class="glyphicon glyphicon-asterisk mandatory"></span></span>
                        </div>
                        <input type="text" class="form-control form-manage form-role" placeholder="">
                    </div>
                    <div class="form-group col-xs-12">
                        <div class="dataFrom-box">
                            <div class="manage-title">
                                <span>过滤条件<span class="glyphicon glyphicon-asterisk mandatory"></span></span>
                            </div>
                            <div class="dataFrom">
                                <!--<div class="dataItem-box">-->
                                    <!--<div class="dataItem">-->
                                        <!--<div class="dataItem-num">1</div>-->
                                        <!--<div class="dataItem-data"></div>-->
                                    <!--</div>-->
                                    <!--<div class="dataItem-btnBox">-->
                                        <!--<button type="button" class="btn btn-default" style="padding: 4px 10px;font-size: 12px;" onclick="dataEdit()">编辑</button>-->
                                        <!--<button type="button" class="btn btn-default" style="padding: 4px 10px;font-size: 12px;" onclick="dataDel()">删除</button>-->
                                    <!--</div>-->
                                <!--</div>-->
                            </div>
                            <a style="margin-top: 6px;margin-left:4px;display: inline-block" onclick="addMore()">添加更多条件</a>
                        </div>
                    </div>
                    <div class="form-group col-xs-12">
                        <div class="manage-title">
                            <span style="margin-right: 12px">公式</span>
                        </div>
                        <input type="text" class="form-control form-manage form-role" placeholder="请输入公式，默认为1 and 2 and 3 这种且方式">
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary submit" onclick="editAdd()">确认</button>
                </div>
            </div><!-- /.modal-content -->
        </div>
    </div>
    <!--接口管理-->
    <div id="interface" class="modal fade" style="z-index: 5000!important;">
        <div class="modal-dialog" style="width: 750px">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">接口管理</h4>
                </div>
                <div class="modal-manage" style="height:400px; overflow: auto!important;">
                    <div class="ibox-content" style="position: relative;">
                        <button class="btn btn-default pull-right my-btn my-btn-add" onclick="newinterface()">新增</button>
                        <button class="btn btn-default my-btn my-search-btn my-btn-search">查询</button>
                        <table id="interfaceTable"
                               data-toggle="table"
                               data-toolbar=".toolbar"
                               data-maintain-selected="true"
                               data-search="true"
                               data-show-refresh="true"
                               data-search-align="left"
                               data-toolbar-align="right">
                            <thead>
                            <tr>
                                <th></th>
                                <th data-field="name">接口名称</th>
                                <th data-field="user">接口地址</th>
                                <th data-align="center" data-formatter="interfaceFormatter" data-events="actionEvents">操作</th>
                            </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </div><!-- /.modal-content -->
        </div>
    </div>
    <!--添加接口-->
    <div id="addInterface" class="modal fade" style="z-index: 5040!important;">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">接口管理</h4>
                </div>
                <div class="modal-manage" style="height:300px;border:1px solid #e5e6e7;margin: 10px;overflow: auto;">
                    <div class="form-group">
                        <div class="manage-title">
                            <span>过滤条件<span class="glyphicon glyphicon-asterisk mandatory"></span></span>
                        </div>
                        <input type="text" class="form-control form-manage form-role" placeholder="" style="border-top: none;border-right: none;border-left: none">
                    </div>
                    <div class="form-group">
                        <div class="manage-title">
                            <span>接口地址<span class="glyphicon glyphicon-asterisk mandatory"></span></span>
                        </div>
                        <input type="text" class="form-control form-manage form-role" placeholder="" style="border-top: none;border-right: none;border-left: none">
                    </div>
                    <div style="margin-bottom: 10px;overflow: hidden;">
                        <button class="btn btn-success pull-left add-btn" onclick="addFun()"><i class="glyphicon glyphicon-plus"></i>添加</button>
                        <button class="btn btn-info pull-left add-btn" onclick="modifyFun()"><i class="glyphicon glyphicon-pencil"></i>修改</button>
                        <button class="btn btn-danger pull-left add-btn" onclick=""><i class="glyphicon glyphicon-trash"></i>移除</button>
                        <span class="pull-right" style="font-weight: bold;padding-right: 4px">数据权限过滤字段维护</span>
                    </div>
                    <table id="editTable"
                           data-toggle="table"
                           data-toolbar=".toolbar"
                           data-search-align="left"
                           data-toolbar-align="right">
                        <thead>
                        <tr>
                            <th></th>
                            <th data-field="name">字段名称</th>
                            <th data-field="user">字段注释</th>
                            <th data-field="formula">字段类型</th>
                        </tr>
                        </thead>
                    </table>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary submit" onclick="add()">确认</button>
                </div>
            </div><!-- /.modal-content -->
        </div>
    </div>
    <!--添加-->
    <div id="add" class="modal fade" style="z-index: 5050!important;">
        <div class="modal-dialog" style="width: 500px;">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">编辑数据权限</h4>
                </div>
                <div class="modal-manage" style="height:250px;">
                    <div class="form-group col-xs-12">
                        <div class="manage-title">
                            <span>字段名称<span class="glyphicon glyphicon-asterisk mandatory"></span></span>
                        </div>
                        <input type="text" class="form-control form-manage form-add" placeholder="">
                    </div>
                    <div class="form-group col-xs-12">
                        <div class="manage-title">
                            <span>字段注释<span class="glyphicon glyphicon-asterisk mandatory"></span></span>
                        </div>
                        <input type="text" class="form-control form-manage form-add" placeholder="">
                    </div>
                    <div class="form-group col-xs-12">
                        <div class="manage-title">
                            <span>比较符<span class="glyphicon glyphicon-asterisk mandatory"></span></span>
                        </div>
                        <select class="form-control form-add">
                            <option value="==请选择==">==请选择==</option>
                            <option>String</option>
                            <option>Data Time</option>
                            <option>Int32</option>
                            <option>Boolean</option>
                            <option>Double</option>
                        </select>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary submit" onclick="addConfirm()">确认</button>
                </div>
            </div><!-- /.modal-content -->
        </div>
    </div>
</div>
<!-- 主要的脚本 -->
<script src="/static/js/jquery-3.1.1.min.js"></script>
<script src="/static/js/bootstrap.min.js"></script>
<script src="/static/plugins/bootstrap-table/bootstrap-table.js"></script>
<script src="/static/plugins/bootstrap-table/bootstrap-table-zh-CN.min.js"></script>
<!-- Toastr -->
<script src="/static/plugins/toastr/toastr.min.js"></script>
<!--zTree-->
<script src="/static/plugins/zTree/jquery.ztree.core.js"></script>
<script src="/static/plugins/zTree/jquery.ztree.excheck.js"></script>
<!-- 定制的javascript和插件 -->
<script src="/static/js/ga.js"></script>
<script src="/static/js/vue.min.js"></script>
<!--公共服务插件-->

<script>
    //Vue 实例化
    var vm = new Vue({
        el: '#content',
        data: {
            leftTreeLoading:true,//左侧树结构加载判断
            modalType:'添加',                   //模态框修改的类型 添加|编辑
            staticModalType:'',                 //删除等功能模态中的提示信息
            editType:'',                        //编辑数据中编辑弹框类型  更多/编辑
            addType:'',                         //接口管理   添加/修改  类型
            staticModal:false,                  //功能模态框确定是否被点击
            tableLineData:null,                 //table中行被选中中的数据
            modalDataName:'',                   //模态中选定树的名称
            modalData:{                         //模态输入框中的值
                code:'',                        //角色编号
                name:'',                        //角色名称
                status:true,                       //当前状态
                description:'',                        //角色描述
            },
            companyTreeList:[],                //公司信息zTree
            userList:[],                        //用户信息
            selectedList:[],                         //已选用户的信息
            imgUrl:'/static/ '+ 1 + '.png',           //用户信息男女
            memberList:[],                              //查看成员列表
            leftTreeList:[],                            //数据授权左侧的zTree
            editData:{                                  //数据授权信息
                name:'',                                    //名称
                formula:'',                                 //公式
            },
        },
    });
    //功能授权
    $(function () {
        var num = 0;
        $('.tab-content div').eq(num).fadeIn(100);
        // 点击下一步
        $('.nextStep').click(function () {
            if(num>=2){
                return num=2;
            }else{
                num++;
                upDown()
            }
            $('.grant-title li').eq(num-1).addClass('complete').removeClass('now');
            $('.grant-title li:eq('+num+')').addClass('now');
            $('.tab-content div').eq(num).fadeIn(500).siblings().fadeOut(1)
        });
        //点击上一步
        $('.lastStep').click(function () {
            if(num<=0){
                return num=0;
            }else{
                num--;
                upDown()
            }
            $('.grant-title li').eq(num+1).removeClass('now complete');
            $('.grant-title li:eq('+num+')').addClass('now');
            $('.tab-content div').eq(num).fadeIn(500).siblings().fadeOut(1);
            if(num==1){

            }
        });
        function upDown() {
            if(num>0){
                $('.lastStep').removeAttr('disabled');
                if(num==2){
                    $('.nextStep').attr('disabled','disabled');
                    $('#submit').removeAttr('disabled')
                }else if(num<2){
                    $('.nextStep').removeAttr('disabled');
                    $('#submit').attr('disabled','disabled')
                }
            }else if(num==0){
                $('.lastStep').attr('disabled','disabled')
            }
        }
        // 功能授权显示
        $('#author').click(function () {
            if(!vm.tableLineData){
                toastr.warning('您没有选中任何数据项,请选中后再操作！');
                return;
            }
            num=0;
            $("#authorization").modal('show');
            $('.grant-title li:eq('+num+')').addClass('now').siblings().removeClass('now complete');
            $('.lastStep').attr('disabled','disabled');
            $('.nextStep').removeAttr('disabled');
            $('#submit').attr('disabled','disabled');
            $('.tab-content div').eq(num).fadeIn(100).siblings().fadeOut();
            workFun()
        })
    });
    //深拷贝
    function copyFun(data) {
        if(typeof data == "object"){
            if(data instanceof Array){
                var newArray = [];
                for(var n=0;n<data.length;n++){
                    newArray.push(data[n])
                }
                return newArray
            }else{
                var newObject={};
                for(var item in data){
                    newObject[item]=copyFun(data[item]);
                }
                return newObject
            }
        }else{
            return data
        }
    }
    //获取系统功能
    function workFun(){
        $.ajax({
            url: 'http://172.16.202.224:8080/core/module/get_tree_first_page/',
            type: 'POST',
            dataType: "json",
            data: '',
            async: true,
            contentType: "application/json",
            success: function (response) {
                if(response && response.success==1){
                    $.fn.zTree.init($("#grantTree"), grantSetting, response.data);
                    buttonFun()
                }
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                switch (XMLHttpRequest.status){
                    case(500):
                        toastr.info('服务器系统内部错误');
                        break;
                    case(403):
                        toastr.info("无权限执行此操作");
                        break;
                    case(408):
                        toastr.info("请求超时");
                        break;
                    default:
                        toastr.info(XMLHttpRequest.responseText);
                }
            }
        });
    }
    //TODO:获取系统按钮
    function buttonFun() {
        $.ajax({
            url: 'http://172.16.202.224:8080/core/module/get_tree_first_page/',
            type: 'POST',
            dataType: "json",
            data: '',
            async: true,
            contentType: "application/json",
            success: function (response) {
                if(response && response.success==1){
                    $.fn.zTree.init($("#buttonTree"), grantSetting, response.data);
                    viewFun()
                }
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                switch (XMLHttpRequest.status){
                    case(500):
                        toastr.info('服务器系统内部错误');
                        break;
                    case(403):
                        toastr.info("无权限执行此操作");
                        break;
                    case(408):
                        toastr.info("请求超时");
                        break;
                    default:
                        toastr.info(XMLHttpRequest.responseText);
                }
            }
        });
    }
    //TODO:获取系统视图
    function viewFun() {
        $.ajax({
            url: 'http://172.16.202.224:8080/core/module/get_tree_first_page/',
            type: 'POST',
            dataType: "json",
            data: '',
            async: true,
            contentType: "application/json",
            success: function (response) {
                if(response && response.success==1){
                    $.fn.zTree.init($("#viewTree"), grantSetting, response.data);
                }
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                switch (XMLHttpRequest.status){
                    case(500):
                        toastr.info('服务器系统内部错误');
                        break;
                    case(403):
                        toastr.info("无权限执行此操作");
                        break;
                    case(408):
                        toastr.info("请求超时");
                        break;
                    default:
                        toastr.info(XMLHttpRequest.responseText);
                }
            }
        });
    }
    //更多点击
    $('#more').click(function() {
            $('#more-box').slideToggle();
            $("body").bind("mousedown", moreDown);
        }
    );
    //点击更多外 关闭
    function moreDown(event) {
        if (!(event.target.id == "more" || event.target.id == "more-box")) {
            $('#more-box').slideUp();
            $("body").unbind("mousedown", moreDown);
        }
    }
    //功能授权完成
    function grantComplete() {
        $('#authorization').modal('hide');
        // $.ajax({
        //     //TODO:功能授权完成
        //     url: '',
        //     type: 'POST',
        //     dataType: "json",
        //     data: '',
        //     async: true,
        //     contentType: "application/json",
        //     success: function (response) {
        //
        //     },
        //     error: function (XMLHttpRequest, textStatus, errorThrown) {
        //         switch (XMLHttpRequest.status){
        //             case(500):
        //                 toastr.info('服务器系统内部错误');
        //                 break;
        //             case(403):
        //                 toastr.info("无权限执行此操作");
        //                 break;
        //             case(408):
        //                 toastr.info("请求超时");
        //                 break;
        //             default:
        //                 toastr.info(XMLHttpRequest.responseText);
        //         }
        //     }
        // });
    }
    //角色管理
    var $table = $("#table");
    //为bootstrapTable添加每一行的事件监听
    $table.on('click-row.bs.table', function (r,row,element){
        $('.table-line-active').removeClass('table-line-active');
        $(element).addClass('table-line-active');
        //点击以后将当前行的数据赋值给vm.modalData
        vm.tableLineData = row;
        obtain(row);
    });
    $table.bootstrapTable({
        columns:                 //列表序号
            [{
                //field: 'Number',//可不加
                // title: 'Number',//标题  可不加
                formatter: function (value, row, index) {
                    return index+1;
                }
            }],
    });
    //获取table信息 并且绘制
    function tableList() {
        $.ajax({
            url: 'http://172.16.202.224:8080/core/user/get_role_all/',
            type: 'POST',
            dataType: "json",
            data: '',
            async: true,
            contentType: "application/json",
            success: function (response) {
                if(response){
                    $table.bootstrapTable('load', response);
                }
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                switch (XMLHttpRequest.status){
                    case(500):
                        toastr.info('服务器系统内部错误');
                        break;
                    case(403):
                        toastr.info("无权限执行此操作");
                        break;
                    case(408):
                        toastr.info("请求超时");
                        break;
                    default:
                        toastr.info(XMLHttpRequest.responseText);
                }
            }
        });
    }
    //模态确认按钮点击事件
    function add() {
        if(!vm.modalData.code){toastr.info('角色编号不能为空!');return}
        if(!vm.modalData.name){toastr.info('角色名称不能为空!');return}
        //将模态中的数据深度克隆一份 防止旧值被修改
        // let newModalData = Object.assign({},vm.modalData);
        var newModalData=copyFun(vm.modalData);
        //checkBox 将true false 转换为 1 0
        newModalData.status?newModalData.status = 1:newModalData.status = 0;      //当前状态
        if(vm.modalType=="添加角色"){
            $.ajax({
                url: 'http://172.16.202.224:8080/core/user/add_role/',
                type: 'POST',
                dataType: "json",
                data: JSON.stringify(newModalData),
                async: true,
                contentType: "application/json",
                success: function (response) {
                    $("#addModal").modal('hide');                    //获取zTree信息 并且绘制
                    tableList();
                    toastr.success('添加成功')
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    switch (XMLHttpRequest.status){
                        case(500):
                            toastr.info('服务器系统内部错误');
                            break;
                        case(403):
                            toastr.info("无权限执行此操作");
                            break;
                        case(408):
                            toastr.info("请求超时");
                            break;
                        default:
                            toastr.info(XMLHttpRequest.responseText);
                    }
                }
            });
        }else if(vm.modalType=="编辑角色"){
            $.ajax({
                url: 'http://172.16.202.224:8080/core/user/edit_role/',
                type: 'POST',
                dataType: "json",
                data: JSON.stringify(newModalData),
                async: true,
                contentType: "application/json",
                success: function (response) {
                    $("#addModal").modal('hide');                    //获取zTree信息 并且绘制
                    tableList();
                    toastr.success('编辑成功')
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    switch (XMLHttpRequest.status){
                        case(500):
                            toastr.info('服务器系统内部错误');
                            break;
                        case(403):
                            toastr.info("无权限执行此操作");
                            break;
                        case(408):
                            toastr.info("请求超时");
                            break;
                        default:
                            toastr.info(XMLHttpRequest.responseText);
                    }
                }
            });
        }
    }
    //获取成员
    function obtain(row) {
        $.ajax({
            url: 'http://172.16.202.224:8080/core/user/get_users_by_role_id/',
            type: 'POST',
            dataType: "json",
            data: JSON.stringify({id:row.id}),
            async: true,
            contentType: "application/json",
            success: function (response) {
                if(response && response.success==1){
                    vm.memberList = response.data;
                }
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                switch (XMLHttpRequest.status){
                    case(500):
                        toastr.info('服务器系统内部错误');
                        break;
                    case(403):
                        toastr.info("无权限执行此操作");
                        break;
                    case(408):
                        toastr.info("请求超时");
                        break;
                    default:
                        toastr.info(XMLHttpRequest.responseText);
                }
            }
        });
    }
    //列表模态中选择类型 触发zTree
    function modalZTreeClick(event, treeId, treeNode, clickFlag) {
        //为 modalData.parent 赋值
        vm.modalDataName = treeNode.name;
        //点击获取值后关闭公司tree
        $("#roleTree").slideToggle("fast");
        $.ajax({
            url: 'http://172.16.202.224:8080/core/department/get_tree_by_organization_id/',
            type: 'POST',
            dataType: "json",
            data: JSON.stringify({id:treeNode.id}),
            async: true,
            contentType: "application/json",
            success: function (response) {
                if(response && response.success==1){
                    $.fn.zTree.init($("#roleItemTree"), itemSetting,response.data);
                }
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                switch (XMLHttpRequest.status){
                    case(500):
                        toastr.info('服务器系统内部错误');
                        break;
                    case(403):
                        toastr.info("无权限执行此操作");
                        break;
                    case(408):
                        toastr.info("请求超时");
                        break;
                    default:
                        toastr.info(XMLHttpRequest.responseText);
                }
            }
        });
    }
    //模态公司zTree调用
    var modalSetting = {
        view: {
            showLine: false
        },
        callback: {
            onClick: modalZTreeClick
        }
    };
    //列表模态树结构绘制
    function renderZTree() {
        $.fn.zTree.init($("#roleTree"), modalSetting,vm.companyTreeList);
    }
    //模态中部门tree
    var itemSetting = {
        view: {
            showLine: false
        },
        callback: {
            onClick: departmentTreeClick
        }
    };
    // 模态中用户每一项点击
    function userItem(item,index) {
        item.isActive = !item.isActive;
        var newIndex = vm.selectedList.indexOf(item);
        if(item.isActive){
            vm.selectedList.push(item);
        }else{
            vm.selectedList.splice(newIndex,1);
        }
    }
    // 已选用户删除.
    function deleteSelectd(item,index) {
        console.log(item);
        vm.selectedList.splice(index,1);
        var newIndex = vm.userList.indexOf(item);
        vm.userList[newIndex].isActive = false;
    }
    //获取公司信息zTree数据
    function getCompanyTreeList() {
        $.ajax({
            url: 'http://172.16.202.224:8080/core/organization/get_tree_all/',
            type: 'POST',
            dataType: "json",
            data:'',
            async: true,
            contentType: "application/json",
            success: function (response) {
                if(response && response.success==1){
                    vm.companyTreeList = response.data;
                    //列表模态树结构绘制
                    renderZTree();
                }
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                switch (XMLHttpRequest.status){
                    case(500):
                        toastr.info('服务器系统内部错误');
                        break;
                    case(403):
                        toastr.info("无权限执行此操作");
                        break;
                    case(408):
                        toastr.info("请求超时");
                        break;
                    default:
                        toastr.info(XMLHttpRequest.responseText);
                }
            }
        });
    }
    //通过部门id 获取员工
    function departmentTreeClick(event, treeId, treeNode, clickFlag) {
        $.ajax({
            url: 'http://172.16.202.224:8080/core/user/get_users_by_department_id/',
            type: 'POST',
            dataType: "json",
            data:JSON.stringify({id:treeNode.id}),
            async: true,
            contentType: "application/json",
            success: function (response) {
                if(response && response.success==1){
                    vm.userList = response.data;
                }
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                switch (XMLHttpRequest.status){
                    case(500):
                        toastr.info('服务器系统内部错误');
                        break;
                    case(403):
                        toastr.info("无权限执行此操作");
                        break;
                    case(408):
                        toastr.info("请求超时");
                        break;
                    default:
                        toastr.info(XMLHttpRequest.responseText);
                }
            }
        });
    }

    //数据权限
    var $dataTable = $("#dataTable");
    $dataTable.on('click-row.bs.table', function (r,row,element){
        $('.table-line-active').removeClass('table-line-active');
        $(element).addClass('table-line-active');
    });
    $dataTable.bootstrapTable({
        columns:                 //列表序号
            [{
                //field: 'Number',//可不加
                // title: 'Number',//标题  可不加
                formatter: function (value, row, index) {
                    return index+1;
                }
            }],
    });
    //数据授权zTree调用
    var editSetting = {
        view: {
            showLine: false
        },
        callback: {
            onClick: modalZTreeClick
        }
    };
    //数据授权  添加  编辑
    function editAdd() {
        //将模态中的数据深度克隆一份 防止旧值被修改
        // let newModalData = Object.assign({},vm.modalData);
        var newModalData=copyFun(vm.modalData);
        if(vm.modalType=="添加角色"){
            $.ajax({
                url: 'http://172.16.202.224:8080/core/user/add_role/',
                type: 'POST',
                dataType: "json",
                data:JSON.stringify(newModalData),
                async: true,
                contentType: "application/json",
                success: function (response) {
                    $("#addModal").modal('hide');                    //获取zTree信息 并且绘制
                    toastr.success('添加成功')
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    switch (XMLHttpRequest.status){
                        case(500):
                            toastr.info('服务器系统内部错误');
                            break;
                        case(403):
                            toastr.info("无权限执行此操作");
                            break;
                        case(408):
                            toastr.info("请求超时");
                            break;
                        default:
                            toastr.info(XMLHttpRequest.responseText);
                    }
                }
            });
        }else if(vm.modalType=="编辑角色"){
            $.ajax({
                url: 'http://172.16.202.224:8080/core/user/edit_role/',
                type: 'POST',
                dataType: "json",
                data:JSON.stringify(newModalData),
                async: true,
                contentType: "application/json",
                success: function (response) {
                    $("#addModal").modal('hide');                    //获取zTree信息 并且绘制
                    toastr.success('编辑成功')
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    switch (XMLHttpRequest.status){
                        case(500):
                            toastr.info('服务器系统内部错误');
                            break;
                        case(403):
                            toastr.info("无权限执行此操作");
                            break;
                        case(408):
                            toastr.info("请求超时");
                            break;
                        default:
                            toastr.info(XMLHttpRequest.responseText);
                    }
                }
            });
        }
    }
    //删除表格中一项
    function deleteTable(){
        if(vm.staticModalType='列表删除'){
            $.ajax({
                url: 'http://172.16.202.224:8080/core/user/delete_role/',
                type: 'POST',
                dataType: "json",
                data:JSON.stringify({id:vm.modalData.id}),
                async: true,
                contentType: "application/json",
                success: function (response) {
                    $("#deleteModal").modal('hide');
                    //获取zTree信息 并且绘制
                    tableList();
                    toastr.success('删除成功')
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    switch (XMLHttpRequest.status){
                        case(500):
                            toastr.info('服务器系统内部错误');
                            break;
                        case(403):
                            toastr.info("无权限执行此操作");
                            break;
                        case(408):
                            toastr.info("请求超时");
                            break;
                        default:
                            toastr.info(XMLHttpRequest.responseText);
                    }
                }
            });
        }else if(vm.staticModalType='数据删除'){
            $.ajax({
                url: 'http://172.16.201.247:8080/core/module/del',
                type: 'POST',
                dataType: "json",
                data:JSON.stringify({id:vm.modalData.id}),
                async: true,
                contentType: "application/json",
                success: function (response) {
                    $("#deleteModal").modal('hide');
                    toastr.success('删除成功')
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    switch (XMLHttpRequest.status){
                        case(500):
                            toastr.info('服务器系统内部错误');
                            break;
                        case(403):
                            toastr.info("无权限执行此操作");
                            break;
                        case(408):
                            toastr.info("请求超时");
                            break;
                        default:
                            toastr.info(XMLHttpRequest.responseText);
                    }
                }
            });
        }else if(vm.staticModalType='接口删除'){
            $.ajax({
                url: 'http://172.16.201.247:8080/core/module/del',
                type: 'POST',
                dataType: "json",
                data:JSON.stringify({id:vm.modalData.id}),
                async: true,
                contentType: "application/json",
                success: function (response) {
                    $("#deleteModal").modal('hide');
                    //获取zTree信息 并且绘制

                    toastr.success('删除成功')
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    switch (XMLHttpRequest.status){
                        case(500):
                            toastr.info('服务器系统内部错误');
                            break;
                        case(403):
                            toastr.info("无权限执行此操作");
                            break;
                        case(408):
                            toastr.info("请求超时");
                            break;
                        default:
                            toastr.info(XMLHttpRequest.responseText);
                    }
                }
            });
        }
    }
    // 数据授权
    function dataDuthorization() {
        if(!vm.tableLineData){
            toastr.warning('您没有选中任何数据项,请选中后再操作！');
            return;
        }
        $("#dataDuthorization").modal('show');
        //数据授权zTree数据
        getLeftZTree()
    }
    //获取机构tree的值
    function getLeftZTree() {
        vm.leftTreeLoading = true;
        $.ajax({
            url: 'http://172.16.202.224:8080/core/organization/get_tree_all/',
            type: 'POST',
            dataType: "json",
            data:'',
            async: true,
            contentType: "application/json",
            success: function (response) {
                if(response && response.success==1){
                    vm.leftTreeLoading = false;
                    vm.leftTreeList = response.data;
                    //列表模态树结构绘制
                    jurisdictionTree();
                }
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                switch (XMLHttpRequest.status){
                    case(500):
                        toastr.info('服务器系统内部错误');
                        break;
                    case(403):
                        toastr.info("无权限执行此操作");
                        break;
                    case(408):
                        toastr.info("请求超时");
                        break;
                    default:
                        toastr.info(XMLHttpRequest.responseText);
                }
            }
        });
    }
    //绘制zTree树 方法
    function jurisdictionTree() {
        //权限授权左侧树
        $.fn.zTree.init($("#myTree"), editSetting, vm.leftTreeList);
    }
    //通过权限 id 获取部门信息  并且绘制table
    function jurisdictionList(id) {
        //获取bootstrapTable的树结构
        $.ajax({
            url: 'http://172.16.202.224:8080/get_department_all/',
            type: 'POST',
            dataType: "json",
            data:JSON.stringify({id:id}),
            async: true,
            contentType: "application/json",
            success: function (response) {
                if(response && response.success == 1) {
                    $dataTable.bootstrapTable('load',response.data);
                }
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                switch (XMLHttpRequest.status){
                    case(500):
                        toastr.info('服务器系统内部错误');
                        break;
                    case(403):
                        toastr.info("无权限执行此操作");
                        break;
                    case(408):
                        toastr.info("请求超时");
                        break;
                    default:
                        toastr.info(XMLHttpRequest.responseText);
                }
            }
        });
    }

    //接口管理
    var $interfaceTable = $("#interfaceTable");
    $interfaceTable.on('click-row.bs.table', function (r,row,element){
        $('.table-line-active').removeClass('table-line-active');
        $(element).addClass('table-line-active');
    });
    $interfaceTable.bootstrapTable({
        columns:                 //列表序号
            [{
                //field: 'Number',//可不加
                // title: 'Number',//标题  可不加
                formatter: function (value, row, index) {
                    return index+1;
                }
            }],
    });

    //接口管理新增
    var $editTable = $("#editTable");
    $editTable.bootstrapTable({
        columns:                 //列表序号
            [{
                //field: 'Number',//可不加
                // title: 'Number',//标题  可不加
                formatter: function (value, row, index) {
                    return index+1;
                }
            }],
    });

    //为按钮列表添加事件
    window.actionEvents = {
        //添加编辑事件
        'click .RoleOfedit': function (e, value, row, index) {
            //将当前行的属性添加给 modalData 供模态框绑定
            vm.modalData = row;
            vm.modalType = "编辑角色";
            $("#addModal").modal('show');
        },
        //添加删除事件
        'click .RoleOfdelete': function (e, value, row, index) {
            //将当前行的属性添加给 modalData 供模态框绑定
            vm.modalData = row;
            vm.staticModalType='列表删除';
            $("#deleteModal").modal('show');
        },
        //为数据授权按钮列表添加事  //添加编辑事件
        'click .edit': function (e, value, row, index) {
            //将当前行的属性添加给 modalData 供模态框绑定
            vm.modalData = row;
            vm.modalType = "数据编辑";
            $("#dataEditing").modal('show');
        },
        //添加删除事件
        'click .del': function (e, value, row, index) {
            //将当前行的属性添加给 modalData 供模态框绑定
            vm.modalData = row;
            vm.staticModalType='数据删除';
            $("#deleteModal").modal('show');
        },
        //为接口管理列表添加事  //添加编辑事件
        'click .interfaceEdit': function (e, value, row, index) {
            //将当前行的属性添加给 modalData 供模态框绑定
            vm.modalData = row;
            $("#addInterface").modal('show');
        },
        //添加删除事件
        'click .interfaceDel': function (e, value, row, index) {
            //将当前行的属性添加给 modalData 供模态框绑定
            vm.modalData = row;
            vm.staticModalType='接口删除';
            $("#deleteModal").modal('show');
        }
    };

    //dom渲染完成后加载
    $(document).ready(function () {
        //获取table信息 并且绘制
        tableList();
        //获取公司信息zTree数据
        getCompanyTreeList();
    });
    //为列表添加checkBox样式
    function checkBoxFormatter(value, row, index) {
        if(value){
            return [
                '<div id="check-box" class="open1"><div id="check" class="open2"></div></div>'
            ].join('');
        }else{
            return [
                '<div id="check-box" class="close1"><div id="check" class="close2"></div></div>'
            ].join('');
        }
    }
    //为列表添加按钮
    function operateFormatter(value, row, index) {
        return [
            '<button type="button" class="RoleOfedit table-btn btn-primary" style="margin-right: 10px">编辑</button>',
            '<button type="button" class="RoleOfdelete btn-primary table-btn">删除</button>'
        ].join('');
    }
    //为功能授权功能授权添加按钮
    function dataFormatter(value, row, index) {
        return [
            '<button type="button" class="edit table-btn btn-primary" style="margin-right: 10px">编辑</button>',
            '<button type="button" class="del btn-primary table-btn">删除</button>'
        ].join('');
    }
    //为接口管理添加按钮
    function interfaceFormatter(value, row, index) {
        return [
            '<button type="button" class="interfaceEdit table-btn btn-primary" style="margin-right: 10px">编辑</button>',
            '<button type="button" class="interfaceDel btn-primary table-btn">删除</button>'
        ].join('');
    }
    //添加按钮被点击
    function addBtnClick() {
        //清空 vm.modalData 中的值
        vm.modalData = {code:'',name:'',status:true,description:''};
        vm.modalType = "添加角色";
        $("#addModal").modal('show');
    }
    //添加成员
    function addMembers() {
         if(!vm.tableLineData){
             toastr.warning('您没有选中任何数据项,请选中后再操作！');
             return;
         }
        $("#addMembers").modal('show');
    }
    // 查看成员
    function viewMembers() {
         if(!vm.tableLineData){
            toastr.warning('您没有选中任何数据项,请选中后再操作！');
            return;
        }
        $("#viewMembers").modal('show');

    }
    $('#role').click(function () {
        $("#roleTree").slideToggle("fast");
        $("body").bind("mousedown", onBodyDown);
    });
    //点击除模态中的zTree外 关闭zTree
    function onBodyDown(event) {
        if (!(event.target.id == "role" || event.target.id == "roleTree" || $(event.target).parents("#roleTree").length > 0)) {
            $("#roleTree").fadeOut("fast");
            $("body").unbind("mousedown", onBodyDown);
        }
    }
    //功能授权zTree
    var grantSetting = {
        view: {
            showLine: false
        },
        check: {
            enable: true
        },
        data: {
            simpleData: {
                enable: true
            }
        },
        callback: {
            onCheck: onCheck
        }
    };
    var clearFlag = false;
    function onCheck(e, treeId, treeNode) {
        if (clearFlag) {
            clearCheckedOldNodes();
        }
    }
    function clearCheckedOldNodes() {
        var zTree = $.fn.zTree.getZTreeObj("grantTree"),
            nodes = zTree.getChangeCheckedNodes();
        for (var i=0, l=nodes.length; i<l; i++) {
            nodes[i].checkedOld = nodes[i].checked;
        }
    }
    //模态中已选点击
    $('.selected-box').click(function () {
        $('#box-right').animate({
            'width':'180px'
        })
    });
    //关闭
    $('#box-close').click(function () {
        $('#box-right').animate({
            'width':'0'
        })
    });
    //功能授权中添加更多条件
    function addMore() {
        vm.editType='更多权限';
        $('#addMore').modal('show');
    }
    //编辑数据权限的编辑
    function dataEdit() {
        vm.editType='权限编辑';
        $('#addMore').modal('show');
    }
    //数据授权新增
    function newNuthorization() {
        vm.staticModalType='新增权限条件';
        $("#newNuthorization").modal('show');
    }
    //接口管理
    function interface() {
        $("#interface").modal('show');
    }
    //接口管理新增
    function newinterface() {
        $("#addInterface").modal('show');
    }
    //添加自定义查询条件
    function jurisdictionFun() {
        if(vm.staticModalType='更多权限'){
            $("#addMore").modal('hide');
        }else if(vm.staticModalType='权限编辑'){
            $("#addMore").modal('hide');
        }else if(vm.staticModalType='新增权限条件'){
            $("#addMore").modal('hide');
        }
    }
    //添加接口中的添加
    function addFun() {
        vm.addType='添加';
        $("#add").modal('show');
    }
    //添加接口中的修改
    function modifyFun() {
        vm.addType='修改';
        $("#add").modal('show');
    }
    //编辑数据权限确定
    function addConfirm() {
        if(vm.addType='添加'){
            $("#add").modal('hide');
        }else if(vm.addType='修改'){
            $("#add").modal('hide');
        }
    }
    //弹出框提示配置
    toastr.options = {
        "closeButton": true,
        "debug": false,
        "progressBar": true,
        "preventDuplicates": false,
        "positionClass": "toast-bottom-right",
        "onclick": null,
        "showDuration": "400",
        "hideDuration": "1000",
        "timeOut": "2000",
        "extendedTimeOut": "1000",
        "showEasing": "swing",
        "hideEasing": "linear",
        "showMethod": "fadeIn",
        "hideMethod": "fadeOut"
    };
</script>
</body>
</html>